<br>
<br>
<br>
<div>
  <jhi-add-button (add)="onAddNote($event)" colour="yellow"></jhi-add-button>
  <jhi-add-button (add)="onAddNote($event)" colour="red"></jhi-add-button>
  <jhi-add-button (add)="onAddNote($event)" colour="green"></jhi-add-button>
  <jhi-add-button (add)="onAddNote($event)" colour="blue"></jhi-add-button>
  <jhi-note *ngFor="let note of notes$ | async" [text]="note.text" [colour]="note.colour" [left]=note.left [top]=note.top [disabled]=note.dirty
    (changeNoteText)="onChangeNoteText($event, note)" (changeNotePosition)="onChangeNotePosition($event, note)" (deleteNote)="onDelete(note)"></jhi-note>
  {{notes$ | async | json}}
</div>